<template>
  <div class="bind-email-form-container">
    <a-form
      id="formLogin"
      ref="formLogin"
      :form="form"
    >
      <a-form-item
        label="Email:"
        :colon="false"
        required
      >
        <a-input
          v-decorator.trim="[
            'email',
            {
              initialValue: currentUser.email,
              rules: [
                formRules.email('Incorrect email invalid')
              ],
              validateTrigger: 'change'
            }
          ]"
          type="text"
          placeholder="Email"
        />
      </a-form-item>

      <a-form-item
        label="Verification code:"
        :colon="false"
        class="a-form-item-send-code"
      >
        <a-input-search
          v-decorator.trim="[
            'code',
            {
              rules: [
                formRules.len({ len: 6 }, 'Incorrect code invalid'),
              ],
              validateTrigger: 'change'
            }
          ]"
          type="text"
          placeholder="Verification code"
          @search="sendEmailCode"
        >
          <a-button
            slot="enterButton"
            class="font-color"
            :disabled="isSendCode"
          >
            {{ codeText }}
          </a-button>
        </a-input-search>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import form from './form';
import { email } from '@/utils/mixins/sendCode';
import formRules from '@/utils/form/rules';
import { mapGetters } from 'vuex';

export default {
  mixins: [form, email],

  data() {
    return {
      formRules
    };
  },

  computed: {
    ...mapGetters(['currentUser'])
  }
};
</script>

<style lang="scss" scoped>
.bind-email-form-container {
  .ant-form-item {
    margin-bottom: 10px;
  }
}
</style>
